<!DOCTYPE html>
<html>
	<head>
		<title></title>
	</head>
	<style>
		body {
			padding: 0;
			margin: 0;
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100vh;
			background-color: #F0FFF0;
		}
	</style>
	<body>
		<div id="number"></div>
		<script type="text/javascript">
			function scrollNumber(option) {
				this.defaultOption = {
					selector: 'body',
					itemClass: 'screen-number',
					childClass: '',
					value: '123',
					color:"#fff",
					background:"#222"
				}

				this.option = Object.assign(this.defaultOption, option)

				let itemStyle = {
					background: this.option.background,
					borderRadius: '.2rem',
					position: 'relative',
					padding: '.5rem',
					marginRight: '.3rem',
					color: this.option.color,
					fontSize: '1.5rem',
					fontWeight: 'bold',
					fontFamily: 'BigNoodleTitling',
					writingMode: 'vertical-lr',
					textOrientation: 'upright',
					overflow: 'hidden',
					display: 'flex !important',
					height: '3rem',
					width: '2rem',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center'
				}

				let childStyle = {
					position: 'absolute',
					top: '1.4rem',
					letterSpacing: '1.4rem',
					transition: `all ${this.option.speed||'2s'}`
				}

				let target = document.querySelector(this.option.selector)
				target.style.display = 'flex'

				let valueArr = this.option.value.split('')

				valueArr.forEach(value => {
					let item = document.createElement('span')
					let child = document.createElement('span')

					item.className = this.option.itemClass
					child.className = this.option.childClass
					child.innerText = '0123456789'

					for (let key in itemStyle) item.style[key] = itemStyle[key]
					for (let key in childStyle) child.style[key] = childStyle[key]

					item.appendChild(child)
					target.appendChild(item)

					setTimeout(() => {
						child.style.transform = `translate(0,${-value * 10}%)`
					}, 50)
				})
			}
		</script>
		<script type="text/javascript">
			window.onload = () => {
				let option = {
					selector: '#number', //要插入的元素位置
					itemClass: 'screen-number',
					childClass: 'screen-number-item',
					speed: '4s', //滚动速度
					value: '65239420',
					color:"pink",
					background:"#222"
				}

				scrollNumber(option)
			}
		</script>
	</body>
</html>
